<template>
  <PageListContainer>
    <div class="base-block">
      <!-- <KSearch ref="searchRef" label-width="80px" inline :model="form" @update:submit="handleQuery" @update:reset="handleReset"> -->
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="账号信息" prop="keyword">
          <el-input v-model="state.params.keyword" placeholder="请输入账号名称、手机号"></el-input>
        </el-form-item>

        <el-form-item label="岗位名称" prop="role_name">
          <el-input v-model="state.params.role_name" placeholder="请输入岗位名称"></el-input>
        </el-form-item>

        <el-form-item label="账号状态" prop="is_frozen">
          <el-select v-model="state.params.is_frozen">
            <el-option v-for="item in statusOptions" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">
      <k-table v-bind="tableState" v-on="tableEvent">
        <template #is_frozen="{ row }">
          <el-switch
            v-model="row.is_frozen"
            class="ml-2"
            width="50"
            inline-prompt
            :active-value="false"
            :inactive-value="true"
            active-text="在职"
            inactive-text="离职"
            :before-change="() => handleChangeStatus(row)"
          />
        </template>
        <template #actions="{ row }">
          <el-link type="primary" @click="handleOpenDrawer(row)">编辑</el-link>
        </template>
      </k-table>
    </div>
    <EditDrawer ref="drawerRef" @after-submit="onAfterSubmit" />
  </PageListContainer>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { useTableList, statusOptions } from './hooks/use-table';
import EditDrawer from './components/edit-drawer.vue';
import { ElMessage } from 'element-plus';
import { baseConfirm } from '@crud/index';
import { toggleAccountStatus } from '@/api/crm-kgj/auth';
import { useRoute } from 'vue-router';
import { hasPermission } from '@/modules/auth';
import { formatParamsSelectVal } from '@/utils';

defineOptions({
  name: 'KgjAccountManage'
});
const route = useRoute();
const { roleName: role_name } = route.query;
const hasLoaded = ref(false);

const { state, tableState, tableEvent, ...methods } = useTableList({
  getParams: (params) => {
    params = { ...params, role_name: hasLoaded.value ? params.role_name : role_name };

    return { ...params, ...formatParamsSelectVal([['is_frozen', 0]], params) };
  }
});
const drawerRef = ref();
const handleOpenDrawer = (row) => {
  if (hasPermission(620)) {
    drawerRef.value?.show(1, row);
  }
};
const handleChangeStatus = async (row) => {
  if (hasPermission(620)) {
    const { is_frozen, user_id } = row;
    await baseConfirm({ title: '关闭账号', message: '关闭账号后，将无法再使用该账号进行登入' });
    const res = await toggleAccountStatus({
      is_frozen: !is_frozen,
      user_id
    });
    if (!res.err) {
      ElMessage.success('操作成功');
      onAfterSubmit();
    }
  }
};
/** 保存后的回调 */
const onAfterSubmit = () => {
  methods.onSearch();
};
onMounted(() => {
  state.params.role_name = role_name;
  hasLoaded.value = true;
});
</script>
